<template>
    <div class="vertex">
        <img alt="Vue logo" src="../../assets/logo-MIDAY.png">
        <span>米道云</span>
        <div class="thisTime" id="time">{{nowTime}}</div>
        <div class="encipher">机械编码：1010654564</div>
    </div>
</template>

<script>
    export default {
        name: "MachineNumber",
        data(){
            return{
                nowTime:""
            }
        },
        created(){
            this.nowTime = new Date().toLocaleString();
            this.getTime();
        },
        methods:{
            getTime(){
                setInterval(()=>{
                    this.nowTime = new Date().toLocaleString();
                },1000)
            }
        }
    }
</script>

<style scoped>
    .vertex {
        position: relative;
        background: white;
        height: 80px;
    }

    img {
        width: 60px;
        margin: 10px 12px;
        display: inline-block;
        border-radius:100px;
        float: left;
    }

    span {
        display: inline-block;
        font-size: 25px;
        line-height: 80px;
        padding-left:5%;
        margin-right: 22%;
    }

    .thisTime{
        display: inline-block;
        height: 80px;
        line-height: 80px;
        margin-right: 5%;
    }
    .encipher{
        display: inline-block;
        height: 80px;
        line-height: 80px;
    }
</style>